'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReTab = require('./ReTab.jsx');
var RePictureLiGroup = require('../../components/pc/RePictureLiGroup.jsx');
var Pager = require('../../components/pc/pager.jsx');
var ReLiGroup = require('./ReLiGroup.jsx');
var ReSlider = require('./ReSlider.jsx');
var actions=require('../../actions/viewPoint.js');
class HkfsViewPoint extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeVideoIndex: 0
        };
        this.renderWealthReport = this.renderWealthReport.bind(this);
        this.renderVideoList = this.renderVideoList.bind(this);
        this.renderViewPointItem=this.renderViewPointItem.bind(this);
    }

    //财富报告
    renderWealthReport() {
        return <RePictureLiGroup reClass="ViewPointPictureGroup"
                                 reData={this.props.wealthReport.content}></RePictureLiGroup>
    }

    //透视焦点
    renderPointItems() {
        return <RePictureLiGroup reClass="ViewPointPictureGroup"
                                 reData={this.props.pointItems.content}></RePictureLiGroup>
    }

    //财富学堂
    renderClassList() {
        return <ReLiGroup reClass="ViewPointClassRoom" reData={this.props.wealthClass.content}></ReLiGroup>;
    }

    //切换视频
    changeVideo(active) {
        this.setState({
            activeVideoIndex: active
        });
        this.refs.HkfsViewPointVideo.autoplay = "true";
    }

    //渲染视频列表
    renderVideoList() {
        return this.props.viewPoints.map((item, i)=> {
            return <div key={"ViewPointsItem"+i} className="ViewPointsItem" onClick={this.changeVideo.bind(this,i)}>
                <img className="videoImg" src={item.imgUrl}/>
                <div
                    className="videoTitle">{item.title.length < 15 ? item.title : item.title.substr(0, 10) + '...'}</div>
                <div className="videoTime">{item.time}</div>
            </div>
        });
    }

    //渲染每周视点
    renderViewPointItem(){
        if(this.props.viewPoints&&this.props.viewPoints.length>0) {
            var activeVideo = this.props.viewPoints[this.state.activeVideoIndex];
            return <div className="HkfsViewPointBack">
                <div className="HkfsViewPoint">
                    <div className="HkfsViewPointTitle">
                        每周视点
                    </div>
                    <div className="HkfsViewPointVideoTitle">
                        <div className="left">{activeVideo.title}</div>
                        <div className="right">{activeVideo.time}</div>
                    </div>
                    <video ref="HkfsViewPointVideo" className="HkfsViewPointVideo" src={activeVideo.url}
                           preload="none" controls="controls" poster={activeVideo.imgUrl}></video>

                    <div className="HkfsViewPointTitle">
                        最新视点
                    </div>
                    <div className="HkfsViewPointVideoBack">
                        <ReSlider heightAuto="19%" showCount={4} isShowPrevAndNext={true} isAutomatic={true}>
                            {this.renderVideoList()}
                        </ReSlider>
                    </div>
                </div>
            </div>
        }
        else{
            return <div className="ProductEmptyDiv">
                <div className="ProductEmptyImgDiv">
                    <img src="images/pc/space_page_big.png"/>
                </div>
                <div className="ProductEmptyText">暂时没有视频哦</div>
            </div>
        }
    }

    render() {
        return <div className="HkfsViewPoint">
            <ReTab reClass="HkfsViewPointTab">
                <div reTabTitle="焦点透视">
                    <div className="HkfsViewPointBack">
                        <div className="HkfsViewPoint">
                            <div className="HkfsViewPointTitle">
                                焦点透视
                            </div>
                            {this.renderPointItems()}
                            <div className="PagerDiv">
                                <Pager page={this.props.pointItems.page} totalPage={this.props.pointItems.totalPage}
                                       onChangePage={i=>this.props.dispatch(actions.getPointItemsByNumber(i,3))}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div reTabTitle="财富报告">
                    <div className="HkfsViewPointBack">
                        <div className="HkfsViewPoint">
                            <div className="HkfsViewPointTitle">
                                财富报告
                            </div>
                            {this.renderWealthReport()}

                            <div className="PagerDiv">
                                <Pager page={this.props.wealthReport.page} totalPage={this.props.wealthReport.totalPage}
                                       onChangePage={i=>this.props.dispatch(actions.getWealthReportByNumber(i,3))}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div reTabTitle="财富学堂">
                    <div className="HkfsViewPointBack">
                        <div className="HkfsViewPoint">
                            <div className="HkfsViewPointTitle">
                                财富学堂
                            </div>

                            <div className="HkfsViewPointContent">
                                {this.renderClassList()}
                            </div>
                            <div className="PagerDiv">
                                <Pager page={this.props.wealthClass.page} totalPage={this.props.wealthClass.totalPage}
                                       onChangePage={i=>this.props.dispatch(actions.getWealthClassByNumber(i,10))}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div reTabTitle="每周视点">
                    {this.renderViewPointItem()}
                </div>
            </ReTab>
        </div>
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.viewPoint);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsViewPoint);